<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTA固件管理测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .content {
            padding: 30px;
        }

        .section {
            margin-bottom: 40px;
            padding: 25px;
            border: 1px solid #e1e5e9;
            border-radius: 10px;
            background: #f8f9fa;
        }

        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: transform 0.2s;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6c757d;
        }

        .btn-success {
            background: #28a745;
        }

        .btn-danger {
            background: #dc3545;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }

        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }

        .result.info {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }

        .firmware-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .firmware-card {
            background: white;
            border: 1px solid #e1e5e9;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .firmware-card h3 {
            color: #667eea;
            margin-bottom: 15px;
            text-align: center;
        }

        .firmware-info {
            margin-bottom: 15px;
        }

        .firmware-info p {
            margin: 5px 0;
            color: #666;
        }

        .firmware-section {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            background: #f8f9fa;
        }

        .firmware-section h4 {
            color: #495057;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .firmware-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid #e1e5e9;
        }

        .tab {
            padding: 12px 25px;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 16px;
            font-weight: 600;
            color: #666;
            transition: all 0.3s;
        }

        .tab.active {
            color: #667eea;
            border-bottom: 3px solid #667eea;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .upload-section {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            background: #f8f9fa;
        }

        .upload-section h3 {
            color: #495057;
            margin-bottom: 15px;
            text-align: center;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin-right: 10px;
        }

        .checkbox-group label {
            margin-bottom: 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔧 OTA固件管理系统</h1>
            <p>设备固件上传、下载、版本管理测试界面</p>
        </div>

        <div class="content">
            <div class="tabs">
                <button class="tab active" onclick="showTab('upload')">📤 固件上传</button>
                <button class="tab" onclick="showTab('download')">📥 固件下载</button>
                <button class="tab" onclick="showTab('version')">📋 版本信息</button>
                <button class="tab" onclick="showTab('list')">📝 固件列表</button>
            </div>

            <!-- 固件上传 -->
            <div id="upload" class="tab-content active">
                <div class="section">
                    <h2>📤 固件上传</h2>
                    <form id="uploadForm">
                        <div class="checkbox-group">
                            <input type="checkbox" id="uploadCm3" onchange="toggleUploadSection('cm3')">
                            <label for="uploadCm3">上传CM3程序</label>
                        </div>
                        
                        <div class="checkbox-group">
                            <input type="checkbox" id="uploadDsp" onchange="toggleUploadSection('dsp')">
                            <label for="uploadDsp">上传DSP程序</label>
                        </div>

                        <!-- CM3上传区域 -->
                        <div id="cm3UploadSection" class="upload-section" style="display: none;">
                            <h3>CM3程序信息</h3>
                            <div class="form-group">
                                <label for="cm3Version">CM3版本号 *</label>
                                <input type="text" id="cm3Version" placeholder="例如: 0.0.1 或 v0.0.1">
                                <small style="color: #666; margin-top: 5px; display: block;">
                                    💡 版本号格式: x.y.z (如 0.0.1, 1.2.3)，每个数字范围0-255，支持v前缀
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="cm3VersionCode">CM3版本代码 *</label>
                                <input type="number" id="cm3VersionCode" placeholder="例如: 123">
                                <small style="color: #666; margin-top: 5px; display: block;">
                                    💡 版本代码: 用于排序的整数值，建议与版本号对应
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="cm3Changelog">CM3更新日志</label>
                                <textarea id="cm3Changelog" placeholder="请输入CM3更新日志内容..."></textarea>
                            </div>
                            <div class="form-group">
                                <label for="cm3File">CM3固件文件 *</label>
                                <input type="file" id="cm3File" accept=".bin,.hex,.elf,.img">
                            </div>
                        </div>

                        <!-- DSP上传区域 -->
                        <div id="dspUploadSection" class="upload-section" style="display: none;">
                            <h3>DSP程序信息</h3>
                            <div class="form-group">
                                <label for="dspVersion">DSP版本号 *</label>
                                <input type="text" id="dspVersion" placeholder="例如: 0.0.1 或 v0.0.1">
                                <small style="color: #666; margin-top: 5px; display: block;">
                                    💡 版本号格式: x.y.z (如 0.0.1, 1.2.3)，每个数字范围0-255，支持v前缀
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="dspVersionCode">DSP版本代码 *</label>
                                <input type="number" id="dspVersionCode" placeholder="例如: 123">
                                <small style="color: #666; margin-top: 5px; display: block;">
                                    💡 版本代码: 用于排序的整数值，建议与版本号对应
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="dspChangelog">DSP更新日志</label>
                                <textarea id="dspChangelog" placeholder="请输入DSP更新日志内容..."></textarea>
                            </div>
                            <div class="form-group">
                                <label for="dspFile">DSP固件文件 *</label>
                                <input type="file" id="dspFile" accept=".bin,.hex,.elf,.img">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="remark">备注信息</label>
                            <textarea id="remark" placeholder="请输入备注信息..."></textarea>
                        </div>
                        
                        <button type="submit" class="btn">上传固件</button>
                    </form>
                    <div id="uploadResult" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 固件下载 -->
            <div id="download" class="tab-content">
                <div class="section">
                    <h2>📥 固件下载</h2>
                    <div class="form-group">
                        <label>下载最新版本</label>
                        <div>
                            <button class="btn" onclick="downloadLatest('cm3')">下载最新CM3固件</button>
                            <button class="btn" onclick="downloadLatest('dsp')">下载最新DSP固件</button>
                        </div>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 最新版本：系统会按照版本号(x.y.z)从高位到低位比较，选择版本号最高的固件
                        </small>
                    </div>
                    <div class="form-group">
                        <label for="firmwareId">下载指定固件</label>
                        <input type="number" id="firmwareId" placeholder="输入固件ID（从固件列表中查看）">
                        <select id="firmwareType">
                            <option value="cm3">CM3程序</option>
                            <option value="dsp">DSP程序</option>
                        </select>
                        <button class="btn" onclick="downloadById()">下载</button>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 固件ID：每次上传固件时系统自动分配的编号，可在"固件列表"中查看
                        </small>
                    </div>
                    <div id="downloadResult" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 版本信息 -->
            <div id="version" class="tab-content">
                <div class="section">
                    <h2>📋 版本信息</h2>
                    <div class="form-group">
                        <label>获取版本信息</label>
                        <div>
                            <button class="btn" onclick="getAllVersions()">获取所有版本</button>
                            <button class="btn" onclick="getChangelog('cm3')">获取CM3更新日志</button>
                            <button class="btn" onclick="getChangelog('dsp')">获取DSP更新日志</button>
                        </div>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 版本号排序规则：按 x.y.z 格式从高位到低位比较，如 1.0.0 > 0.9.9，0.0.2 > 0.0.1
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label>最新版本信息（含下载链接）</label>
                        <div>
                            <button class="btn" onclick="getLatestFirmware()">获取最新固件信息</button>
                            <button class="btn" onclick="getLatestByType('cm3')">获取最新CM3</button>
                            <button class="btn" onclick="getLatestByType('dsp')">获取最新DSP</button>
                        </div>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 返回最新版本信息，包含下载链接，适用于前端和App调用
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label>检查固件更新</label>
                        <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                            <input type="text" id="currentCm3Version" placeholder="当前CM3版本" style="width: 150px;">
                            <input type="text" id="currentDspVersion" placeholder="当前DSP版本" style="width: 150px;">
                            <button class="btn" onclick="checkUpdate()">检查更新</button>
                        </div>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 输入当前版本号，系统会检查是否有更新可用
                        </small>
                    </div>
                    
                    <div id="versionResult" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 固件列表 -->
            <div id="list" class="tab-content">
                <div class="section">
                    <h2>📝 固件列表</h2>
                    <div class="form-group">
                        <label>获取固件列表</label>
                        <div>
                            <button class="btn" onclick="getFirmwareList()">获取所有固件</button>
                        </div>
                        <small style="color: #666; margin-top: 10px; display: block;">
                            💡 固件列表按上传时间倒序排列，最新版本按版本号(x.y.z)从高位到低位比较确定
                        </small>
                    </div>
                    <div id="listResult" class="result" style="display: none;"></div>
                    <div id="firmwareList" class="firmware-list"></div>
                </div>
            </div>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>处理中，请稍候...</p>
            </div>
        </div>
    </div>

    <script>
        // 获取当前页面的协议和主机，用于API调用
        // 如果是file协议（直接打开HTML文件），使用默认的HTTP服务器地址
        let API_BASE;
        if (window.location.protocol === 'file:') {
            API_BASE = 'http://112.74.97.118';
        } else {
            API_BASE = window.location.protocol + '//' + window.location.host;
        }

        // 显示/隐藏标签页
        function showTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }

        // 切换上传区域显示
        function toggleUploadSection(type) {
            const section = document.getElementById(type + 'UploadSection');
            const checkbox = document.getElementById('upload' + type.charAt(0).toUpperCase() + type.slice(1));
            
            if (checkbox.checked) {
                section.style.display = 'block';
            } else {
                section.style.display = 'none';
                // 清空该区域的内容
                const inputs = section.querySelectorAll('input, textarea');
                inputs.forEach(input => input.value = '');
            }
        }

        // 显示加载状态
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }

        // 显示结果
        function showResult(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
            element.style.display = 'block';
        }

        // 固件上传
        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            showLoading();

            const formData = new FormData();
            
            // 添加CM3信息
            if (document.getElementById('uploadCm3').checked) {
                formData.append('cm3_version', document.getElementById('cm3Version').value);
                formData.append('cm3_version_code', document.getElementById('cm3VersionCode').value);
                formData.append('cm3_changelog', document.getElementById('cm3Changelog').value);
                formData.append('cm3_file', document.getElementById('cm3File').files[0]);
            }
            
            // 添加DSP信息
            if (document.getElementById('uploadDsp').checked) {
                formData.append('dsp_version', document.getElementById('dspVersion').value);
                formData.append('dsp_version_code', document.getElementById('dspVersionCode').value);
                formData.append('dsp_changelog', document.getElementById('dspChangelog').value);
                formData.append('dsp_file', document.getElementById('dspFile').files[0]);
            }
            
            formData.append('remark', document.getElementById('remark').value);

            try {
                const response = await fetch(`${API_BASE}/ota/upload`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                
                if (response.ok) {
                    showResult('uploadResult', JSON.stringify(result, null, 2), 'success');
                    // 清空表单
                    document.getElementById('uploadForm').reset();
                    document.getElementById('cm3UploadSection').style.display = 'none';
                    document.getElementById('dspUploadSection').style.display = 'none';
                } else {
                    showResult('uploadResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('uploadResult', `上传失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        });

        // 下载最新固件
        async function downloadLatest(firmwareType) {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/download/latest/${firmwareType}`);
                
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = response.headers.get('content-disposition')?.split('filename=')[1] || `${firmwareType}_firmware.bin`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                    showResult('downloadResult', `${firmwareType.toUpperCase()}固件下载成功`, 'success');
                } else {
                    const error = await response.json();
                    showResult('downloadResult', JSON.stringify(error, null, 2), 'error');
                }
            } catch (error) {
                showResult('downloadResult', `下载失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 根据ID下载固件
        async function downloadById() {
            const firmwareId = document.getElementById('firmwareId').value;
            const firmwareType = document.getElementById('firmwareType').value;
            
            if (!firmwareId) {
                showResult('downloadResult', '请输入固件ID', 'error');
                return;
            }

            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/download/${firmwareId}/${firmwareType}`);
                
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = response.headers.get('content-disposition')?.split('filename=')[1] || `firmware_${firmwareId}_${firmwareType}.bin`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                    showResult('downloadResult', `固件ID ${firmwareId} 的${firmwareType.toUpperCase()}程序下载成功`, 'success');
                } else {
                    const error = await response.json();
                    showResult('downloadResult', JSON.stringify(error, null, 2), 'error');
                }
            } catch (error) {
                showResult('downloadResult', `下载失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 获取所有版本信息
        async function getAllVersions() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/version`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'success');
                } else {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('versionResult', `获取版本信息失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 获取更新日志
        async function getChangelog(firmwareType) {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/changelog/${firmwareType}`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'success');
                } else {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('versionResult', `获取${firmwareType.toUpperCase()}更新日志失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 获取最新固件信息（含下载链接）
        async function getLatestFirmware() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/latest`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'success');
                } else {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('versionResult', `获取最新固件信息失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 获取指定类型的最新固件
        async function getLatestByType(firmwareType) {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/latest/${firmwareType}`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'success');
                } else {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('versionResult', `获取最新${firmwareType.toUpperCase()}固件失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 检查固件更新
        async function checkUpdate() {
            const currentCm3Version = document.getElementById('currentCm3Version').value;
            const currentDspVersion = document.getElementById('currentDspVersion').value;
            
            if (!currentCm3Version && !currentDspVersion) {
                showResult('versionResult', '请输入至少一个当前版本号', 'error');
                return;
            }

            showLoading();
            try {
                const params = new URLSearchParams();
                if (currentCm3Version) params.append('current_cm3_version', currentCm3Version);
                if (currentDspVersion) params.append('current_dsp_version', currentDspVersion);
                
                const response = await fetch(`${API_BASE}/ota/check-update?${params}`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'success');
                } else {
                    showResult('versionResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('versionResult', `检查更新失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 获取固件列表
        async function getFirmwareList() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/list`);
                const result = await response.json();
                
                if (response.ok) {
                    showResult('listResult', JSON.stringify(result, null, 2), 'success');
                    displayFirmwareList(result.items);
                } else {
                    showResult('listResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('listResult', `获取固件列表失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }

        // 显示固件列表
        function displayFirmwareList(firmwares) {
            const container = document.getElementById('firmwareList');
            container.innerHTML = '';

            firmwares.forEach(firmware => {
                const card = document.createElement('div');
                card.className = 'firmware-card';
                
                let cm3Section = '';
                let dspSection = '';
                
                if (firmware.cm3_version) {
                    cm3Section = `
                        <div class="firmware-section">
                            <h4>CM3程序</h4>
                            <p><strong>版本:</strong> ${firmware.cm3_version}</p>
                            <p><strong>版本代码:</strong> ${firmware.cm3_version_code}</p>
                            <p><strong>文件大小:</strong> ${firmware.cm3_file_size ? (firmware.cm3_file_size / 1024).toFixed(2) + ' KB' : 'N/A'}</p>
                            ${firmware.cm3_changelog ? `<p><strong>更新日志:</strong> ${firmware.cm3_changelog}</p>` : ''}
                        </div>
                    `;
                }
                
                if (firmware.dsp_version) {
                    dspSection = `
                        <div class="firmware-section">
                            <h4>DSP程序</h4>
                            <p><strong>版本:</strong> ${firmware.dsp_version}</p>
                            <p><strong>版本代码:</strong> ${firmware.dsp_version_code}</p>
                            <p><strong>文件大小:</strong> ${firmware.dsp_file_size ? (firmware.dsp_file_size / 1024).toFixed(2) + ' KB' : 'N/A'}</p>
                            ${firmware.dsp_changelog ? `<p><strong>更新日志:</strong> ${firmware.dsp_changelog}</p>` : ''}
                        </div>
                    `;
                }
                
                card.innerHTML = `
                    <h3>固件 ID: ${firmware.id}</h3>
                    <div class="firmware-info">
                        <p><strong>上传时间:</strong> ${new Date(firmware.created_at).toLocaleString()}</p>
                        <p><strong>状态:</strong> ${firmware.is_active ? '激活' : '未激活'}</p>
                        ${firmware.remark ? `<p><strong>备注:</strong> ${firmware.remark}</p>` : ''}
                    </div>
                    ${cm3Section}
                    ${dspSection}
                    <div class="firmware-actions">
                        ${firmware.cm3_version ? `<button class="btn btn-success" onclick="downloadById(${firmware.id}, 'cm3')">下载CM3</button>` : ''}
                        ${firmware.dsp_version ? `<button class="btn btn-success" onclick="downloadById(${firmware.id}, 'dsp')">下载DSP</button>` : ''}
                        <button class="btn btn-secondary" onclick="deleteFirmware(${firmware.id})">删除</button>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // 删除固件
        async function deleteFirmware(firmwareId) {
            if (!confirm('确定要删除这个固件吗？')) {
                return;
            }

            showLoading();
            try {
                const response = await fetch(`${API_BASE}/ota/${firmwareId}`, {
                    method: 'DELETE'
                });
                const result = await response.json();
                
                if (response.ok) {
                    showResult('listResult', JSON.stringify(result, null, 2), 'success');
                    // 刷新列表
                    getFirmwareList();
                } else {
                    showResult('listResult', JSON.stringify(result, null, 2), 'error');
                }
            } catch (error) {
                showResult('listResult', `删除失败: ${error.message}`, 'error');
            } finally {
                hideLoading();
            }
        }
    </script>
</body>
</html> 